---
title: "Contrast"
description: "Utilities for applying contrast filters to an element."
featureVersion: 'v2.1+'
---

import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin: function () {
    return function ({ addUtilities }) {
      addUtilities({
        '.contrast-0': { '--tw-contrast': 'contrast(0)' },
        '.contrast-50': { '--tw-contrast': 'contrast(.5)' },
        '.contrast-75': { '--tw-contrast': 'contrast(.75)' },
        '.contrast-100': { '--tw-contrast': 'contrast(1)' },
        '.contrast-125': { '--tw-contrast': 'contrast(1.25)' },
        '.contrast-150': { '--tw-contrast': 'contrast(1.5)' },
        '.contrast-200': { '--tw-contrast': 'contrast(2)' },
      })
    }
  }
}

## Usage

Use the `contrast-{amount?}` utilities alongside the `filter` utility to control an element's contrast.

```html
<div class="filter contrast-125 ...">
  <!-- ... -->
</div>
```

## Responsive

To control an element's contrast at a specific breakpoint, add a `{screen}:` prefix to any existing contrast utility. For example, use `md:contrast-150` to apply the `contrast-150` utility at only medium screen sizes and above.

```html
<div class="filter contrast-110 **md:contrast-150** ...">
  <!-- ... -->
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

You can customize which `contrast` utilities are generated using the `contrast` key in the `theme` section of your `tailwind.config.js` file.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       contrast: {
+         25: '.25',
+       }
+     }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Variants

<Variants plugin="contrast" name="contrast" />

### Disabling

<Disabling plugin="contrast" name="contrast" />
